<template>
  <div>
    <div style="padding: 20px">
      <el-card>
        <div class="body">
          <elform
            @search="search"
            @add="add"
            :btnName="'新增用户'"
            :placeholder="'根据用户名搜索'"
            :label="''"
          ></elform>

          <elalert :counts="counts"></elalert>

          <el-table :data="list" style="width: 100%">
            <el-table-column
              align="center"
              prop="id"
              label="序号"
              width="181"
            ></el-table-column>
            <el-table-column align="center" prop="email" label="邮箱">
            </el-table-column>
            <el-table-column align="center" prop="phone" label="联系电话">
            </el-table-column>
            <el-table-column align="center" prop="username" label="用户名">
            </el-table-column>
            <el-table-column
              align="center"
              prop="permission_group_title"
              label="权限组名称"
            >
            </el-table-column>
            <el-table-column align="center" prop="role" label="角色">
            </el-table-column>
            <el-table-column
              align="center"
              label="操作"
              width="120"
              class="btncell"
            >
              <template #default="{ row }">
                <el-button type="primary" circle plain @click="edit(row)">
                  <i class="el-icon-edit"></i
                ></el-button>
                <el-button
                  type="danger"
                  circle
                  plain
                  style="margin-left: 9px"
                  v-if="row.id !== 2"
                  @click="del(row)"
                >
                  <i class="el-icon-delete"></i
                ></el-button>
              </template>
            </el-table-column>
          </el-table>

          <elpagination
            :counts="counts"
            :data="data"
            :n="[10, 20, 30, 50]"
            @handleSizeChange="handleSizeChange"
            @handleCurrentChange="handleCurrentChange"
          ></elpagination>
        </div>
      </el-card>
    </div>
    <!-- 弹窗 -->
    <el-dialog
      :title="title"
      :visible.sync="showDialog"
      @close="$refs.addRef.resetFields()"
    >
      <el-form ref="addRef" :model="addFormdata" :rules="rules">
        <el-form-item label-width="120px" label="用户名" prop="username"
          ><el-input v-model="addFormdata.username"></el-input>
        </el-form-item>
        <el-form-item label-width="120px" label="邮箱" prop="email"
          ><el-input v-model="addFormdata.email"></el-input>
        </el-form-item>
        <el-form-item
          label-width="120px"
          label="密码"
          prop="password"
          v-if="title === '创建用户'"
          ><el-input v-model="addFormdata.password"></el-input>
        </el-form-item>
        <el-form-item label-width="120px" label="角色" prop="role"
          ><el-input v-model="addFormdata.role"></el-input>
        </el-form-item>
        <el-form-item
          label-width="120px"
          label="权限组名称"
          prop="permission_group_id"
        >
          <el-select
            v-model="addFormdata.permission_group_id"
            placeholder="请选择"
          >
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label-width="120px" label="联系电话" prop="phone"
          ><el-input v-model="addFormdata.phone"></el-input>
        </el-form-item>
        <el-form-item label-width="120px" label="介绍" prop="introduction"
          ><el-input
            type="textarea"
            placeholder="Please input"
            v-model="addFormdata.introduction"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showDialog = false">取消</el-button>
        <el-button type="primary" @click="save">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import elform from '@/components/form/index.vue'
import elalert from '@/components/elalert/index.vue'
import elpagination from '@/components/elpagination/index.vue'
import { list, add, detail, update, remove } from '@/api/base/users'
import { simple } from '@/api/base/permissions'
export default {
  data() {
    return {
      data: {
        page: 1,
        pagesize: 10,
        username: ''
      },
      list: [],
      currentPage: 1,
      counts: 1,
      showDialog: false,
      title: '创建用户',
      addFormdata: {
        username: '',
        email: '',
        password: '',
        role: '',
        permission_group_id: '',
        phone: '',
        introduction: ''
      },
      options: [],
      rules: {
        username: [
          { required: true, massage: '请输入用户名', triggers: 'blur' }
        ],
        email: [{ required: true, massage: '请输入用户名', triggers: 'blur' }],
        password: [
          { required: true, massage: '请输入用户名', triggers: 'blur' }
        ]
      }
    }
  },
  components: { elform, elalert, elpagination },
  created() {
    this.getUserList()
  },
  methods: {
    // 获取用户数据
    async getUserList() {
      const { data } = await list(this.data)
      this.list = data.list
      this.counts = data.counts
      this.data.page = data.page
      this.data.pagesize = data.pagesize
    },
    handleSizeChange(val) {
      this.data.pagesize = val
      this.getUserList()
    },
    handleCurrentChange(val) {
      this.data.page = val
      this.getUserList()
    },
    search(username) {
      this.data.username = username
      this.getUserList()
    },
    async add() {
      this.title = '创建用户'
      this.showDialog = true
      const res = await simple()
      this.options = res.data
    },
    async save() {
      await this.$refs.addRef.validate()
      if (this.title === '创建用户') {
        try {
          await add(this.addFormdata)
          this.getUserList()
          this.$message.success('创建成功')
        } catch (error) {
          console.log(error)
        }
      } else if (this.title === '编辑用户') {
        try {
          await update(this.addFormdata)
          this.$message.success('编辑成功')
        } catch (error) {
          console.log(error)
        }
      }
      this.showDialog = false
    },
    async edit(row) {
      this.title = '编辑用户'
      this.showDialog = true
      const { data } = await detail(row)
      const res = await simple()
      this.options = res.data
      this.addFormdata = { ...data }
      delete this.addFormdata.create_time
      delete this.addFormdata.last_update_time
      delete this.addFormdata.sex
      delete this.addFormdata.status
    },
    async del(row) {
      this.$confirm('该项操作不可恢复！确定删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await remove(row)
          this.$message.success('删除成功')
          this.getUserList()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '取消删除'
          })
        })
    }
  }
}
</script>

<style scoped lang="scss">
.el-card {
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  padding: 20px;
  border: 1px solid #ebeef5;
  background-color: #fff;
  color: #303133;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  border-radius: 4px;
  overflow: hidden;
  .body {
    width: 100%;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
      Microsoft YaHei, Arial, sans-serif;

    ::v-deep .el-table {
      .el-table--fit {
        border-right: 0;
        border-bottom: 0;
      }
    }
    ::v-deep .el-table th.el-table__cell.is-leaf {
      border-bottom: 2px solid #e8e8e8;
      background-color: #fafafa;
    }
    ::v-deep .el-card .body[data-v-eacc1416] .el-table td.el-table__cell div {
      display: flex;
      padding-left: 5px;
      padding-right: 5px;
      box-sizing: border-box;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: normal;
      word-break: break-all;
      line-height: 23px;
    }
  }
}
.el-dialog {
  .el-form .el-form-item {
    width: 400px;
    margin-left: 120px;
  }
  .dialog-footer {
    text-align: center;
    padding: 10px 20px 20px;
  }
  .el-input {
    width: 100%;
    display: inline-block;
  }
}
</style>
